<template>
    <div class="authMenuEdit">
        <div class="top_menu">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">摄影平台</el-breadcrumb-item>
                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{type}}菜单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="main_content" v-loading="loading">
            <div class="control display-flex justify-content-spaceBetween align-items-center">
                <h3>{{type}}菜单</h3>
                <div class="display-flex align-items-center">
                    <el-button type="primary" icon="caret-left" @click="backToMenu">返回</el-button>
                </div>
            </div>
            <el-card class="box-card">
                <el-form :model="baseForm" :rules="rules" ref="baseForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="菜单标题" prop="title">
                        <el-input type="text" v-model="baseForm.title" auto-complete="off" placeholder="请输入轮播标题"></el-input>
                    </el-form-item>
                    <el-form-item label="图标icon" prop="url">
                        <el-input type="text" v-model="baseForm.icon" auto-complete="off" placeholder="请输入菜单图标"></el-input>
                    </el-form-item>
                    <el-form-item label="跳转地址" prop="url">
                        <el-input type="text" v-model="baseForm.url" auto-complete="off" placeholder="请输入跳转地址"></el-input>
                    </el-form-item>
                    <el-form-item label="父级菜单" prop="pid">
                        <el-select v-model="baseForm.pid" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in parent"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排序" prop="order" :rules="[{ type: 'number', message: '排序字段必须为数字值'}]">
                        <el-input type="text" v-model.number="baseForm.order" auto-complete="off" placeholder="请输入数字，数字越大，排位越靠前"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用" prop="status">
                        <el-switch on-text="" off-text="" v-model="baseForm.status"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('baseForm')">提交</el-button>
                        <el-button @click="resetForm('baseForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <el-dialog size="small" title="图片" :visible.sync="dialogTableVisible">
            <el-card>
                <img v-bind:src="baseForm.img" alt="" style="width:100%">
            </el-card>
        </el-dialog>
    </div>
</template>

<script src="../../js/auth/MenuEdit.js"></script>